<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        .box {
            width: 200px;
            background-color: lightskyblue;
            border: 1px solid black;
            padding-bottom: 20px;
            padding-top: 20px;
        }
    </style>
</head>
<body>
<button id="hide">隐藏效果</button>
<button id="show">显示效果</button>
<button id="hideAndShow">隐藏然后显示</button>
<br>
<button id="fadein">淡入</button>
<button id="fadeout">淡出</button>
<button id="fadeInAndOut">淡入淡出</button>
<br>
<button id="slideUp">收起菜单</button>
<button id="slideDown">弹出菜单</button>


<div class="box" id="menu_class">分类相关</div>
<div class="outter" id="outter">
<div class="box" id="box1">查看分类</div>
<div class="box" id="box2">添加分类</div>
<div class="box" id="box3">删除分类</div>
</div>
<div class="box">用户相关</div>

<script>
    $(function () {
        $('#hide').click(function () {
            $('.box').hide(50, function () {
                // alert("隐藏完了")
            })
        })
        $('#show').dblclick(function () {
            $('.box').show(3000, function () {
                alert('显示出来')

            })
        })
    })
    $('#hideAndShow').click(function () {
        //如果隐藏就显示 ,如果显示就 隐藏

        $('.box').toggle(1000)

        //    -----------
        $('#fadein').click(function () {
            $('#box1').fadeIn('fast')
            $('#box2').fadeIn('slow')
            $('#box3').fadeIn(3000);

        })
        $('#fadeout').click(function () {
            $('#box1').fadeOut('fast')
            $('#box2').fadeOut('slow')
            $('#box3').fadeOut(3000);
        })
        $('#fadeInAndOut').click(function () {
            $('#box1').fadeToggle('fast')
            $('#box2').fadeToggle('slow')
            $('#box3').fadeToggle(3000);
        })
        $('#slideUp').click(function () {
            $("#box1").slideUp('1000')
            $('#box2').slideUp('500')
            $('#box3').slideUp('100')
        })
        $('#slideDown').click(function () {
            $("#box1").slideDown('1000')
            $('#box2').slideDown('500')
            $('#box3').slideDown('100')
        })
        $('#menu_class').click(function () {
            $('#outter').slideToggle(250)
        })
    })
</script>
</body>
</html>